<script setup>
import { computed } from 'vue'

defineOptions({
  name: 'LButton'
})

const props = defineProps({
  type: {
    type: String,  //只有primary
    default: ''
  },
  animate: {
    type: String,  //动画
    default: ''
  }
})

let dynamicClass = computed(() => {
  return {
    'l-primary-button': props.type === 'primary',
    'l-mask-button': props.animate === 'mask',
    'l-divide-button': props.animate === 'divide',
    'l-divide1-button': props.animate === 'divide1',
    'l-divide2-button': props.animate === 'divide2',
    'l-divide3-button': props.animate === 'divide3',
    'l-divide4-button': props.animate === 'divide4',
  }
})
</script>

<template>
  <button class="l-button" :class="[dynamicClass]">
    <span class="l-button-content">
      <slot></slot>
    </span>
  </button>
</template>

<style scoped lang="less">
@import 'index.less';
</style>
